<template>
  <div class="mobile-header-page">
    <section class="mobile-header-body" @click="showMenu = false">
      <img class="header-logo" src="@/assets/images/mobile/logo.png" @click="menuHandle('home')" />
      <div class="header-right">
        <img v-if="userInfo && userInfo.studentPictureUrl" class="right-icon" :src="userInfo.studentPictureUrl" @click.stop="onShowMenu('user')">
        <img v-else class="right-icon" src="@/assets/images/mobile/user.png" @click.stop="onShowMenu('user')">
        <img v-if="showMenu && showType === 'menu'" class="right-icon" src="@/assets/images/mobile/menu-active.png" @click.stop="onShowMenu('menu')">
        <img v-else class="right-icon" src="@/assets/images/mobile/menu.png" @click.stop="onShowMenu('menu')">
      </div>
    </section>
    <van-popup
      class="header-popup"
      v-model="showMenu"
      position="top"
      :get-container="getContainer"
    >
      <template v-if="showType === 'menu'">
        <a class="menu-item" v-for="v in menuList" :key="v.id" @click="menuHandle(v.id, v.query || '')">
          {{ v.name }}
        </a>
      </template>
      <template v-if="showType === 'user'">
        <a class="menu-item" v-for="v in userList" :key="v.id" @click="handleCommand(v.id)">
          {{ v.name }}
        </a>
      </template>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {
    userInfo: Object
  },
  // 局部注册的组件
  components: {

   },
  // 组件状态值
  data() {
    return {
      showMenu: false,
      showType: '',
      menuList: [
        {
          id: 'home',
          name: '首页'
        },
        {
          id: 'hire',
          name: '招聘专区'
        },
        {
          id: 'studentStyle',
          name: '学生风采'
        },
        {
          id: 'cultivate',
          query: {
            type: 2, url: 'companyProfile'
          },
          name: '关于我们'
        }
      ],
      userList: [
        {
          id: 'userCenter',
          name: '个人中心',
        },
        {
          id: 'invited',
          name: '面试邀约',
        },
        {
          id: 'feedback',
          name: '应聘反馈',
        },
        {
          id: 'inboxNotifications',
          name: '站内信',
        },
        {
          id: 'logOut',
          name: '退出',
        },
      ]
    };
  },
  created() {
  },
  // 组件方法
  methods: {
    onShowMenu(type) {
      this.showMenu = !this.showMenu
      this.showType = type
    },
    menuHandle(key, query) {
      this.showMenu = false
      if (key === 'cultivate') {
        this.$emit('openPage', key, query)
        return
      }
      this.$emit('menuHandle', key)
    },
    handleCommand(key) {
      this.showMenu = false
      this.$emit('handleCommand', key)
    },
    getContainer() {
      return document.querySelector('.mobile-header-page');
    }
  },
  beforeDestroy() {
  }
};
</script>
<style lang="less" scoped>
.mobile-header-page {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1099;
  width: 100%;
  .mobile-header-body {
    position: relative;
    z-index: 12;
    display: flex;
    padding: 0 0.12rem;
    height: 0.54rem;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
  }
  .header-logo {
    width: 0.86rem;
    height: 0.25rem;
  }
  .header-right {
    display: flex;
  }
  .right-icon {
    margin-left: 0.2rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    &:first-child {
      margin-left: 0;
    }
  }
  .header-popup{
    top: 0.54rem;
    z-index: 11 !important;
  }
  .menu-item {
    display: flex;
    height: 0.46rem;
    align-items: center;
    justify-content: center;
    font-size: 0.15rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3D6CB0;
    line-height: 0.21rem;
    border-top: 0.01rem solid #EBEBEB;
  }
  ::v-deep .van-overlay {
    z-index: 10 !important;
  }
}
</style>
